<template>
    <div>
        <van-nav-bar
        	  title="能不能吃"
        	  left-arrow  
        	   @click-left="onClickLeft"
        		class="dan-k"
        />
		
		<!-- 搜索栏 -->
		<van-search placeholder="输入食物名称搜索" v-model="value" />
		
		<!-- 详情 -->
		<div class="ck-k">
			<div class="kp-k" v-for="(item,i) in food" :key="i" @click="todo(i)">
			 <img class="tp-k" :src="item.fimgpath" />
			 <div class="xq-k">
				 <h5 class="title">{{item.fname}}</h5>
				 <div  class="sq-k">
					 <p class="nk-k">
					 <van-icon name="fail" class="icon"/><span class="p01t-k">{{item.fstage1}}</span>
					 <van-icon name="fail" class="icon"/><span class="p01t-k">{{item.fstage2}}</span>
					 <van-icon name="fail" class="icon"/><span class="p01t-k">{{item.fstage3}}</span>
					 </p>
				 </div>
				 <p class="xx-k">{{item.fadvice}}</p>
			 </div>.
		 </div>
		</div>
		
    </div>
</template>

<script>
	import axios from 'axios' 
export default {
    name:'Products',
	data(){
		return{
			food:[],
			value:'',
			id:''
		}
	},
	methods:{
		onClickLeft(){
			this.$router.go(-1)
		},
		todo(index){
			this.$router.push('/fooddetails?id='+parseInt(index+1))
		}
	},
	mounted(){
		this.id = this.$route.query.id
		var _this = this
		axios({
			url:"http://10.8.158.60:8080/food/foodById",
			params:{mid:_this.id}
		}).then(function(data){
			_this.food = data.data.msg
		})
	}
	
}
</script>

<style scoped>
	.dan-k{
		width:375px;
		height:42px;		
		background-color: #F9F9F9;		
	}
	.van-icon{
		color: #000000;
		font-weight: bold;
	}
	.van-nav-bar__title{						
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;		
		font-family: Arial;		
	}
	.van-search__content{		
		width: 315px;
		height: 34px;
		border-radius: 12px;
		background-color: rgba(219, 219, 219, 1);
		text-align: center;
		border: 1px solid rgba(255, 255, 255, 0);
	}
	
.ck-k{
	margin-top: 10px;
	padding-left: 20px;
}
	.kp-k{
		margin-top: 10px;
		height:110px;
	}
	.kp-k{
		margin-top: 10px;
		height:110px;
		width: 355px;
	}
	.tp-k{
		width: 100px;
		height: 100px;
		border-radius: 8px;
		background-color: rgba(240, 240, 240, 1);
		overflow: hidden;
		border: none;
		float: left;
	}
	.xq-k{
		width: 245px;
		height: 109px;
		float: right;
		border-bottom: 1px solid rgba(232, 232, 232, 1);
	}
	.title{
		width: 32px;
		height: 22px;
		color: rgba(102, 102, 102, 1);
		font-size: 16px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top: 20px;
	}
	.sq-k{
		height: 17px;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		display: flex;
		flex-direction: row;
		margin-right: 12px;
		margin-top: 5px;
	}
	.nk-k{
		width: 100%;
		height: 17px;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		font-family: PingFangSC-regular;
		display: flex;
	}
	.nk-k span{
		min-width: 15%;
	}
	
	.icon{
		width: 15px;
		height: 15px;
		background-color: rgba(153, 153, 153, 1);
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		line-height:15px;
	}
	.xx-k{
		height: 14px;
		color: rgba(153, 153, 153, 1);
		font-size: 10px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	
     
</style>
